<template>
  <div class="home">
    <Header></header>
    <Swiper :swiperImgList="swiperImgList"></Swiper>
    <Icon :iconList="iconList"></Icon>
    <Location></Location>
    <Active></Active>
    <Hot :hotList="hotList"></Hot>
    <Like :likeList="likeList"></Like>
    <Vacation :vacationList="vacationList"></Vacation>
  </div>
</template>

<script>
  import Header from './pages/header.vue'
  import Swiper from './pages/Swiper.vue'
  import Icon from './pages/icon.vue'
  import Location from'./pages/location.vue'
  import Active from'./pages/active.vue'
  import Hot from './pages/hot.vue'
  import Like from './pages/like.vue'
  import Vacation from './pages/vacation.vue'
  export default{
    components:{
      Header,
      Swiper,
      Icon,
      Location,
      Active,
      Hot,
      Like,
      Vacation
    },
    data(){
      return{
        hotList:[],
        iconList:[],
        likeList:[],
        swiperImgList:[],
        vacationList:[]
      }
    },
    mounted(){
          this.$http.get('http://localhost:8080/static/mock/dataHome.json').then(res=>{
            console.log(res.data.data)
            const data=res.data.data[0]
            this.hotList=data.hotList;
            this.iconList=data.iconList;
            this.likeList=data.likeList;
            this.swiperImgList=data.swiperImgList;
            this.vacationList=data.vacationList;
          })
        }
  }
</script>

<style>
  .home{
    background-color: #f5f5f5;
  }
</style>
